<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>省市联动选择</title>
</head>
<body onload="init()">
    请选择：<select id="pro"></select>省<select id="city"></select>市
    <script type="text/javascript">
        let provinces = [];
        let pro = document.getElementById("pro");
        let city = document.getElementById("city");
        
        function init() {
            // 创建一个示例数据结构
            // 实际应用中应该从服务器获取
            const mockData = [
                {
                    name: "北京市",
                    city: ["朝阳"]
                },
                {
                    name: "上海市",
                    city: ["中心"]
                },
                {
                    name: "浙江省",
                    city: ["杭州市", "宁波市", "温州市", "绍兴市", "湖州市"]
                }
            ];
            
            // 模拟异步加载
            setTimeout(() => {
                provinces = mockData;
                
                // 填充省份下拉框
                for (let i = 0; i < provinces.length; i++) {
                    pro.options[i] = new Option(provinces[i].name);
                }
                
                // 初始化第一个省份的城市列表
                updateCities(0);
                
                // 添加省份变更事件监听
                pro.onchange = function() {
                    updateCities(pro.selectedIndex);
                };
            }, 300);
        }
        
        // 更新城市下拉框的函数
        function updateCities(index) {
            city.length = 0;
            const cities = provinces[index].city;
            for (let i = 0; i < cities.length; i++) {
                city.options[i] = new Option(cities[i]);
            }
        }
    </script>
</body>
</html>